<template>
	<view class="page" :style="{'min-height':h+'px','padding-top':(mt)+'px'}">
		<customNavBar1 :title="title"></customNavBar1>
		<view class="hander">

			<swiper class="swiper" :circular="true" :autoplay="true" :interval="3000" :duration="1000"
				style="height: 580rpx; width: 100%;">
				<swiper-item class="swiper-items" v-for="item,index in list1 ">
					<image class="image" style="width: 100%; height: 100%;" :src="item.path" mode="aspectFit"></image>
				</swiper-item>
			</swiper>

			<view class="category-main">
				<view class="category-main-container" v-for="item,index in categoryMain" :key='item.name'
					@click="goryclick(item)">
					<view class="image">
						<image :src="item.icon" mode="aspectFill"></image>
					</view>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<view class="concent">
			<view class="one-content">
				<view class="title">
					活动日历
				</view>
				<!-- 年月时间 -->
				<view class="dateList">
					<view :class="['item',index==currentDate?'itemSelected':'']" v-for="(item,index) in dateArr"
						:key="index" @click="handleDate(item,index)">
						<view v-if="item.week!=='全部'">
							<text>{{weeks[item.week]}}</text>
							<text>{{item.time}}</text>
						</view>
						<view v-if="item.week=='全部'" class="item_one">
							<text>全部</text>
							<text></text>
						</view>
					</view>
					<view class="item item_two" @click='timeShow=true'>
						<text>更多</text>
						<text>日期</text>
					</view>
				</view>
				<!-- 列表 -->
				<view class="card-list2">
					<view v-for="(item,index) in userList" :key="index" @click="activity(item)">
						<view class="acrd">
							<image class="image" :src="item.pic" mode="aspectFill">
							</image>
							<view class="texts">
								<view class="text">
									{{item.title}}
								</view>
								<view class="text1">
									{{item.startTime}}
								</view>
								<view style="display: flex; justify-content: space-between;">
									<view class="text2">
										<!-- {{item.money==0?'免费':item.money}} -->
										免费
									</view>
									<view style="width: 160rpx;height: 54rpx;background: #007A69;border-radius: 50rpx;display: flex;align-items: center;justify-content: center;color: #fff;font-size: 24rpx;" v-if="item.status=='进行中'&&item.isApplication==1">
										立即报名
									</view>
									<view v-else class=""
										style="color: #007A69; margin: 6rpx 0; font-size: 28rpx; font-weight: Bold;">
										{{item.status}}
									</view>
								</view>
							</view>
						</view>
					</view>

					<nodata v-if="userList.length === 0"></nodata>

				</view>
			</view>
		</view>


		<u-calendar class="u-time" :show="timeShow" mode="single" @confirm="confirm" @close="timeShow=false"
			:defaultDate="calendar.defaultDate" :maxDate="calendar.maxDate" :minDate="calendar.minDate"
			:monthNum="calendar.monthNum"></u-calendar>


	</view>
</template>

<script>
	import nodata from '@/compoments/NoData/index2.vue'
	import customNavBar1 from '@/compoments/uNavBar1'
	// Vue.component('c-nav-bar1', customNavBar1);
	export default {
		components: {
			customNavBar1,
			nodata
		},
		data() {
			return {
				title: '活动日历',
				// h: uni.getSystemInfoSync().windowHeight,
				// mt: uni.getSystemInfoSync().statusBarHeight,
				list1: [{
					path: 'https://fsy.shengsi.gov.cn/file/20240730/c99f5def34a54250ad0f6ec5b1eea8f6.png',
					route:''
				}],
				indexDB: null,
				fromData: {
					limit: 99,
					page: 1,
					activityType: '',
					time: ''
				},
				userList: {},
				dataList: [],
				dictValue: null,
				categoryMain: [{
						name: "全部",
						icon: "https://i.ringzle.com/file/20240113/1072b7d41c9c4035a2e76cf305486e9b.png",
						activityType: ''
					},
					{
						name: "景区活动",
						icon: "https://i.ringzle.com/file/20240113/f80e5044daac44ec8c6829c6bb832b08.png",
						activityType: '0'
					},
					{
						name: "文化演出",
						icon: "https://i.ringzle.com/file/20240113/4b2d33a1b19040efbad201c9cf047b3a.png",
						activityType: '1'
					},
					{
						name: "文化惠民",
						icon: "https://i.ringzle.com/file/20240113/924db42f847b45daa3b3683f4de92c4d.png",
						activityType: '2'
					},
					{
						name: "其他",
						icon: "https://i.ringzle.com/file/20240113/ede06cb57d044e1bbfce3c317d27f641.png",
						activityType: '3'
					}
				],
				weeks: ['周日', '周一 ', '周二', '周三', '周四', '周五', '周六'],
				dateArr: [],
				checkTime: '',
				currentDate: 0,
				timeShow: false,
				activityType: null,
				currentYear: '',
				calendar: {
					minDate: '',
					maxDate: '',
					defaultDate: '',
					monthNum: 13,
				},
			}
		},
		onLoad() {
			this.chooseTimed()
			this.getList()
			this.getDict()
			this.getTime();
			this.checkTime = this.getDay(0).time; //默认当天日期
			this.getSwiper()

		},
		methods: {
			// 设置默认日期，最大值为今天，最小值为去年今天
			// chooseTimed() {
			// 	let date = new Date();
			// 	let year = date.getFullYear();
			// 	let month = date.getMonth() + 1;
			// 	let day = date.getDate();
			// 	if (month <= 9) {
			// 		month = '0' + month;
			// 	}
			// 	if (day <= 9) {
			// 		day = '0' + day;
			// 	}
			// 	let minyear = year - 1;
			// 	this.calendar.minDate = minyear + '-' + month + '-' + day;
			// 	this.calendar.maxDate = year + '-' + month + '-' + day;
			// 	this.calendar.defaultDate = year + '-' + month + '-' + day;


			// 	console.log(this.calendar);
			// },
			// 选择当前上下3个月之内的数据
			chooseTimed() {
				let date = new Date();
				let year = date.getFullYear();
				let month = String(date.getMonth() + 3);
				let day = String(date.getDate());
				month = month.padStart(2, '0');
				day = day.padStart(2, '0');
				this.calendar.maxDate = year + '-' + month + '-' + day;
				// this.calendar.defaultDate = year + '-' + month + '-' + day;
				this.calendar.defaultDate = new Date().Format('yyyy-MM-dd');

				let nowTime = date.getTime();
				let preTime = nowTime - 30 * 24 * 60 * 60 * 1000;
				let preDate = new Date(preTime);
				let preYear = preDate.getFullYear();
				let preMonth = String(preDate.getMonth() - 3);
				let preDay = String(preDate.getDate());
				preMonth = preMonth.padStart(2, '0');
				preDay = preDay.padStart(2, '0');
				this.calendar.minDate = preYear + '-' + preMonth + '-' + preDay;
				console.log(this.calendar);
			},


			goryclick(item) {
				this.fromData.activityType = item.activityType
				this.getList()
			},


			getTime(currentDate) {
				let dateArr = [];
				for (let i = 0; i < 3; i++) {
					let date = this.getDay(i, currentDate);
					dateArr.push(date);
				}
				this.dateArr = [{
					week: '全部'
				}, ...dateArr];
			},
			getDay(day, currentDate) {
				if (currentDate) {
					var today = new Date(currentDate);
				} else {
					var today = new Date();
				}
				var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;

				today.setTime(targetday_milliseconds); //注意，这行是关键代码

				var tYear = today.getFullYear();
				this.currentYear = tYear;

				var tMonth = today.getMonth();
				var tDate = today.getDate();
				var week = today.getDay();
				tMonth = this.doHandleMonth(tMonth + 1);
				tDate = this.doHandleMonth(tDate);
				let json = {
					time: tMonth + "-" + tDate,
					week: week,
					// price: this.list.realPrice || 0.01,
				}
				return json
			},
			doHandleMonth(month) {
				var m = month
				if (month.toString().length == 1) {
					m = "0" + month;
				}
				return m;
			},

			//选择更多日期
			handleDate(item, index) {
				if (item.week == '全部') {
					this.fromData.time = ''
					this.getList()
				} else if (item.week != '全部') {
					this.fromData.time = this.currentYear + '-' + item.time
					this.getList()
				}

				this.currentDate = index;
				this.checkTime = item.time;
				this.currentTime = item;
			},
			//单程确认选择日期
			confirm(e) {
				this.checkTime = e[0];
				this.currentDate = 0;
				this.timeShow = false;
				this.getTime(this.checkTime);
				this.currentTime = this.getDay(0, e[0])
			},






			getDict() {
				this.$api.get('/sys/dict/type/all').then(res => {
					//this.$store.state.Dict = Object.assign(res.data);
					this.dataList = res.data.data.find((p) => p.dictType == 'banner_type').dataList;
					this.dataList.forEach(item => {
						if (item.dictLabel == this.title) {
							// this.dictValue = item.dictValue
							// this.getSwiper(item.dictValue)
							this.getSwiper()
						}
					})
				})
			},
			// 获取轮播图数据
			getSwiper() {
				this.$api.get(`/sys/isappletpic/queryBannerByType/${10}`).then(res => {
					if (res.data.code === 0) {
						let list = res.data.data.bannerList.map(b => {
							return {
								path: b.path,
								route: b.linkUri
							}
						});
						if (list.length > 0) this.list1 = list;
					}
				})
			},
			getList() {
				this.$api.get('/api/activity/getPage', this.fromData).then(res => {
					this.userList = res.data.data.list
					// this.userList.NowActivity.forEach(item => {
					// 	this.activityType = item.activityType
					// })
				})
			},
			// 去详情
			activity(item) {
				uni.navigateTo({
					url: '/pagesService/funActivity/detailActivity?id=' + item.id
				})
			},
		}
	}
</script>


<style lang="less">
	.u-icon__icon {
		font-size: 40rpx !important;
	}

	.u-calendar-month__days__day {
		height: 104rpx !important;
	}

	.u-calendar__confirm .u-button {
		width: calc(100% - 24rpx) !important;
		height: 88rpx !important;
		background: #007A69 !important;
		border-radius: 44rpx !important;
	}

	.u-calendar__confirm .u-button text {
		font-size: 32rpx !important;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF !important;
	}

	.u-calendar scroll-view {
		height: 600rpx !important;
	}
</style>

<style lang="less" scoped>
	.dateList {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
		box-sizing: border-box;
		font-size: 24rpx;

		.item_one {
			// line-height: 100rpx;
			// margin: auto;
			box-sizing: border-box;
			height: 115rpx;
			line-height: 35rpx;
			padding: 22rpx 0 20rpx;
			margin-top: 0 !important;

			text {
				margin-bottom: 20rpx;
				display: block;
				color: #333;

				// &:nth-child(1) {
				// 	margin: 15rpx 0;
				// }

				&:nth-child(2) {
					margin: 20rpx 0;
					height: 34rpx;
				}

				&:nth-child(3) {
					color: #333333;
					font-weight: bold;
				}
			}

		}

		.item_two {
			line-height: 30rpx;
			padding: 10rpx 0;
			color: #007A69 !important;
			// background: linear-gradient(90deg, #188FFE 0%, #188FFE 100%);
			// border: 1rpx solid #EFEFEF;
			// font-size: 24rpx;
			// text-align: center;
			// border-radius: 16rpx;
			// color: #FFFFFF;
		}

		.item {
			padding: 25rpx 0 10rpx;
			border: 2rpx solid #DBDBDB;
			font-size: 24rpx;
			text-align: center;
			border-radius: 16rpx;
			width: 17%;
			margin: auto;
			box-sizing: border-box;

			text {
				margin-top: 10rpx;
				display: block;
				color: #333;

				// &:nth-child(1) {
				// 	margin: 15rpx 0;
				// }

				&:nth-child(2) {
					margin: 20rpx 0;
				}

				&:nth-child(3) {
					color: #007A69;
					font-weight: bold;
				}
			}

			&:last-child {
				padding-top: 30rpx;

				text {
					color: #007A69;

				}

			}
		}

		.itemSelected {
			box-sizing: border-box;
			// padding: 20rpx 0;
			padding: 25rpx 0 10rpx;
			// background: linear-gradient(90deg, #188FFE 0%, #188FFE 100%);
			background-color: #F0F8F6;

			border: 2rpx solid #007A69;
			font-size: 24rpx;
			text-align: center;
			border-radius: 16rpx;
			color: #007A69;
			// margin: auto;

			text {
				display: block;
				color: #007A69;

				&:nth-child(2) {
					margin: 20rpx 0;
					color: #007A69;
				}

				&:nth-child(3) {
					color: #007A69;
				}
			}

			&:last-child {
				padding-top: 15rpx;
				color: #FFFFFF;
			}
		}
	}

	.itemSelected {
		box-sizing: border-box;
		// background: linear-gradient(90deg, #0EBFFE 0%, #00D3E8 100%);
		background-color: #F0F8F6;
		border: 1rpx solid #007A69;
		font-size: 24rpx;
		text-align: center;
		border-radius: 16rpx;
		margin: auto;

		text {
			display: block;
			color: #007A69;

			&:nth-child(2) {
				margin: 20rpx 0;
				color: #007A69;
			}

			&:nth-child(3) {
				color: #007A69;
			}
		}

		&:last-child {
			padding-top: 15rpx;
			color: #FFFFFF;
		}
	}


	.hander {
		// padding: 24rpx !important;
		box-sizing: border-box;
		background-color: #fff;

		.category-main {
			margin: 20rpx 0;
			// margin-top: 20rpx;
			// width: 702rpx;
			height: 150rpx;
			background: #ffffff;
			border-radius: 16rpx;
			display: flex;
			flex-wrap: wrap;
			align-items: center;

			// align-content: center;
			.category-main-container {
				width: 90rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				flex-shrink: 2;
				flex-basis: 20%;
			}

			.image {
				height: 64rpx;
				width: 64rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.category-main-container text {
				margin-top: 24rpx;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #1C1E41;
			}
		}
	}

	.page {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	.concent {
		box-sizing: border-box;
		padding: 0 24rpx 24rpx;
		box-sizing: border-box;

		.one-content {
			box-sizing: border-box;

			.title {
				// margin-top: 32rpx;
				margin-bottom: 40rpx;
				font-size: 36rpx;
				color: #1C1E41;
				font-weight: Bold;
			}

			.card-list {
				display: flex;
				overflow-y: auto;
				padding: 4rpx 4rpx 20rpx;

				.acrd {
					margin-right: 20rpx;
					border-radius: 16rpx;
					background-color: #fff;
					height: 512rpx;
					width: 314rpx;
					box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);

					.texts {
						padding: 20rpx;
						// height: 72rpx;
					}

					.text {
						height: 72rpx;
						width: 280rpx;
						/* 设置容器宽度 */
						display: -webkit-box;
						-webkit-line-clamp: 2;
						/* 显示的行数 */
						-webkit-box-orient: vertical;
						overflow: hidden;
						/* 隐藏超出部分 */
						text-overflow: ellipsis;
						/* 超出部分显示省略号 */
						font-size: 26rpx;
						color: #1C1E41;

					}

					.text1 {
						font-size: 26rpx;
						color: #FF4141;
					}


					.image {
						width: 100%;
						height: 348rpx;
						border-radius: 16rpx 16rpx 0 0;
					}
				}
			}

			.card-list1 {
				display: flex;
				overflow-y: auto;
				padding: 4rpx;

				.acrd {
					margin-right: 20rpx;
					border-radius: 16rpx;
					background-color: #fff;
					// box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
					width: 330rpx;
					height: 148rpx;
					border: 1rpx solid #CCCCCC;

					.texts {
						padding: 20rpx;
						// height: 72rpx;
					}

					.text {
						font-size: 26rpx;
						display: flex;
						color: #1C1E41;
						display: flex;
						justify-content: space-between;
						align-items: center;

						image {
							width: 54rpx;
							height: 54rpx;
							border-radius: 16rpx;
						}

						.right {
							display: flex;
							align-items: center;
						}
					}


					.text1 {
						font-weight: Bold;
						font-size: 40rpx;
						color: #1C1E41;
					}


					.image {
						width: 314rpx;
						height: 348rpx;
						border-radius: 16rpx;
					}
				}
			}

			.card-list2 {
				// display: flex;
				// overflow-y: auto;
				padding: 4rpx 4rpx 50rpx;

				.acrd {
					margin-top: 30rpx;
					display: flex;
					margin-right: 20rpx;
					border-radius: 16rpx;
					// background-color: #fff;
					// box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

					.texts {
						padding: 20rpx;
						// height: 72rpx;
					}

					.text {
						width: 346rpx;
						/* 设置容器宽度 */
						display: -webkit-box;
						-webkit-line-clamp: 2;
						/* 显示的行数 */
						-webkit-box-orient: vertical;
						overflow: hidden;
						/* 隐藏超出部分 */
						text-overflow: ellipsis;
						/* 超出部分显示省略号 */
						font-size: 32rpx;
						color: #1C1E41;
						font-weight: Bold;
					}

					.text1 {
						font-weight: Regular;
						font-size: 26rpx;
						color: #1C1E41;
						margin: 7rpx 0 20rpx;
					}

					.text2 {
						font-weight: bold;
						font-size: 30rpx;
						color: #FF4141;
						margin: 6rpx 0;
					}


					.image {
						width: 288rpx;
						height: 210rpx;
						border-radius: 16rpx;
					}
				}
			}
		}
	}

	.active {
		box-sizing: border-box;
		border: 1rpx solid #E0B181 !important;
		background-color: #FCF8F3 !important;
		color: #CC9967 !important;
		border-radius: 16rpx !important;
	}

	.actives {
		box-sizing: border-box;
		color: #CC9967 !important;
	}
</style>